<template>
  <span
    class="trust-status"
    :class="[`is-${type}`, { 'is-simple': simple }]">
    {{ label }}
    <slot/>
  </span>
</template>

<script>
export default {
  name: 'Status',
  props: {
    simple: {},
    label: {},
    type: {}
  }
}
</script>

<style
  lang="stylus"
  rel="stylesheet/stylus"
  type="text/stylus">
  .trust-status
    font-family: PingFangSC-Regular
    font-size: 14px
    color: #666666

    &::before
      content: " "
      display: inline-block
      width: 10px
      height: 10px
      border-radius: 50%

    &.is-simple
      &::before
        display: none

      &.is-green
        color: #0AB877

      &.is-blue
        color: #46BAFF

      &.is-red
        font-family: PingFangSC-Medium
        color: #E6394E

      &.is-gray
        color: #D7D7D9

      &.is-yellow
        color: #F5A623

    &.is-green
      &::before
        background: #0AB877

    &.is-blue
      &::before
        background: #46BAFF

    &.is-red
      &::before
        background: #E6394E

    &.is-gray
      &::before
        background: #D7D7D9

    &.is-yellow
      &::before
        background: #F5A623
</style>
